<template>
  <div v-loading="loading" :style="{ height }">
    <iframe :src="url" frameborder="no" style="width: 100%; height: 100%" scrolling="auto" />
  </div>
</template>
  
  <script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';

// 定义 props
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
});

// 定义响应式变量
const height = ref<string>(`${document.documentElement.clientHeight - 94.5}px`);
const loading = ref<boolean>(true);

// 计算属性
const url = computed(() => props.src);

// 生命周期钩子
onMounted(() => {
  // 使用 nextTick 确保 DOM 更新完成后执行
  nextTick(() => {
    loading.value = false;
  });

  const handleResize = () => {
    height.value = `${document.documentElement.clientHeight - 94.5}px`;
  };

  window.addEventListener('resize', handleResize);

  // 在组件卸载前移除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
  });
});
</script>